
<template>
  <el-scrollbar style="height:100%">
    <div>
      <el-row>
        <div class="rowborder">
          <span class="txt">录入问题反馈表</span>
          <el-form :model="form" ref="form" label-width="80px">
            <el-col :span="12">
              <!-- 输入活动模块 -->
              <el-form-item prop="factmod">
                <el-input placeholder="请输入内容" v-model="form.factmod">
                  <template slot="prepend">活动模块</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 选择学校 -->
              <el-form-item label="学校名称" prop="feedschname">
                <el-select v-model="form.feedschname" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.feedschname"
                    :label="item.label"
                    :value="item.feedschname"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 问题描述（可加入图片） -->

            <div class="text_2">问题描述（可加入图片）</div>
            <!-- 问题描述 -->
            <div class="other-form-item">
              <el-form-item class="div-Textarea" prop="fopinions">
                <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="form.fopinions"></el-input>
              </el-form-item>
              <!-- 上传图片 -->
              <el-form-item class="div-Img">
                <div>上传图片(大小不得超过2MB)：</div>
                <el-upload
                ref="upload"
                  list-type="picture-card"
                  :before-upload="imgSize"
                  :on-preview="handlePictureCardPreview"
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  action=""
                  :on-progress="handleProgress"
                  :http-request="UploadImage"
                  :limit="3"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt>
                </el-dialog>
              </el-form-item>
              <!-- 输入问题网址 -->
              <el-form-item class="div-Http" prop="fproblemhttp">
                <el-input placeholder="输入网址" v-model="form.fproblemhttp" class="http-input">
                  <template slot="prepend">问题网址</template>
                </el-input>
              </el-form-item>
              <!-- 选择问题发生时间 -->
              <div class="div-Time">
                <el-form-item label="问题时间" class="div-Time-picker" prop="feedbacktime">
                  <el-date-picker
                    v-model="form.feedbacktime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
              </div>
              <!-- 选择技术人员 -->
              <div class="div-TechnicalPersonnel">
                <el-form-item label="技术人员" class="div-TechnicalPersonnel-option" prop="ftechnician">
                  <el-select v-model="form.ftechnician" placeholder="请选择">
                    <el-option
                      v-for="item in table"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!-- 上传附件 -->
              <!-- <div class="div-Annex">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-remove="annexremove"
                    :on-preview="annexpreview"
                    :limit="3"
                  >
                    <div>附件></div>
                  </el-upload>
                </el-form-item>
              </div>-->
            </div>
            <!-- 确认取消 -->
            <el-form-item class="div-Button">
              <el-button type="primary" @click="onSubmit('form')" class="button-confirm">确认</el-button>
              <el-button class="button-cancel" @click="con">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
import { addFeedbacks, getFeedbacks,getTechnologys } from "@/api/Feedback";
import { getUser } from "@/utils/auth";
import { getCustomers } from "@/api/customer";
import { mapState } from "vuex";
import { UploadImageApi, removeImage } from "@/api/UploadImage";
export default {
  data() {
    name: "添加表单";
    return {
      list: "",
      dialogVisible: false,
      form: {},
      schname: "",
      fileList: [],
      fileName: [],
      change: true,
      baseimg: [],
      baseimgs: [],
      uploadImg:[],
      dialogImageUrl: "",
      table: [],
      options: []
    };
  },
  mounted() {
    this.getdata();
    this.getdata1();
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    // 获取
    getdata() {
      let data = async () => {
        try {
          let result = await getFeedbacks();
          let sname = await getCustomers();
          if (result) {
            this.list = result;
            this.schname = sname;
            this.loading = false;
            var options = [];
            var a = this.schname;
            console.log(a.length);
            console.log(a);
            for (var i = 0; i < a.length; i++) {
              options.push({
                value: "选项" + i,
                feedschname: this.schname[i].Custschool
              });
            }
            this.options = options;
            console.log(this.options);
            return options;
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },
    // 数据库添加反馈表
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$confirm("此操作将上传此用户, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              var name = this.fileName.toString()
              const number = getUser().name;
              var inputtime = new Date();
              var test = /\s*/g;
              let query = {
                factmod: this.form.factmod.replace(test, ""),
                feedschname: this.form.feedschname.replace(test, ""),
                feedbacktime: this.form.feedbacktime.replace(test, ""),
                imgsrc: name,
                // fannex: this.form.fannex.replace(test, ""),
                fopinions: this.form.fopinions.replace(test, ""),
                ftechnician: this.form.ftechnician.replace(test, ""),
                state: "进行中",
                finputtime: inputtime,
                fentryclerk: number,
                fproblemhttp: this.form.fproblemhttp.replace(test, "")
                // frecommendations: ""
              };
              console.log(query);
              let add = async () => {
                try {
                  await addFeedbacks(query);
                } catch (err) {
                  console.log(err);
                }
              };
              add();
              this.fileName = []
              this.list.push(query);
              // this.list = this.data
              this.form = {};
              this.$message({
                type: "success",
                message: "上传成功!"
              });
              this.dialogFormVisible = false;
              this.$router.push({ path: "/Feedback" });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "数据未输入完整"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
        getdata1() {
      let data = async () => {
        try {
          let result = await getTechnologys()

          if (result) {

            for(var i = 0;i<result.length;i++){
              if(result[i].Role=="Developer")
              this.table.push(result[i].name)
               console.log(this.developerID)
            }

          }
        } catch (err) {
          console.log(err)
        }
      }
      data()
    },
    /*getFile(file, fileList) {
      let a = this;
      this.getBase64(file.raw).then(res => {
        if (a.baseimg.length == 0) {
          a.baseimg.push({ res });
        }
        console.log(this.baseimg);
      });
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },*/
    UploadImage (param) {
      const formData = new FormData()
      formData.append('file', param.file)
      UploadImageApi(formData).then(response => {
        var reg = new RegExp("wwwroot/")
        var name = response.data.url.replace(reg,"")
        this.fileName.push(name)
        console.log(this.fileName)
        param.onSuccess()
      }).catch(response => {
        console.log('图片上传失败')
        param.onError()
      })
    },
   
    async con () {
      var data = this.fileName
      console.log(data)
      await removeImage(data)
      this.$router.push({ path: "/Feedback" });
    },
    handleRemove(file, fileList) {
      
  
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
      console.log(this.form.dialogImageUrl);
    },
    handleProgress(file) {
      let baseimgs = this.baseimgs;
      // for (var i = 0; i < baseimgs.length; i++) {
      //   if (baseimgs[i].baseimg != this.baseimg[0].res) {
      // baseimgs.push({ baseimg: this.baseimg[0].res });
      // this.baseimg = [];
      //   }
      // }

      console.log(baseimgs);
    },
    // annexremove(file, fileList) {},
    // annexpreview(file) {},
    imgSize(file) {
      console.log(123);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }

      return isLt2M;
    },
    uploadSuccess: function(response, file, fileList) {
      console.log("上传文件成功response" + response);
      console.log("上传文件成功file" + file);
      console.log("上传文件成功fileList" + fileList);
      // response：即为后端传来的数据，这里我返回的是图片的路径
      app.user.userImage = response;
    },
    uploadError: function(response, file, fileList) {
      console.log("上传文件失败response" + response);
      console.log("上传文件失败file" + file);
      console.log("上传文件失败fileList" + fileList);
    }
  }
};
</script>



<style>
.rowborder {
  border: 2px solid #cccccc;
  margin: 40px 20px 40px 40px;
}
.text_2 {
  margin: 2% 0 2% 8%;
}
.txt {
  display: block;
  width: 12%;
  height: 30px;
  position: relative;
  margin-left: 5%;
  top: -10px;
  text-align: center;
  background: white;
}
.other-form-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.div-Textarea {
  width: 90%;
}
.div-Img {
  width: 100%;
}
.div-Http {
  width: 100%;
}
.http-input {
  width: 80%;
}
.div-Time {
  width: 100%;
}
.div-Time-picker {
  margin-left: 70px;
}
.div-TechnicalPersonnel {
  width: 100%;
}
.div-TechnicalPersonnel-option {
  margin-left: 70px;
}
.div-Button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-confirm {
  width: 120px;
  background-color: #009489;
  color: white;
}
.button-cancel {
  width: 120px;
}
.div-Annex {
  width: 100%;
  height: 42px;
  border: #f1f1f1 2px solid;
  margin: 2% 5% 2% 5%;
}
</style>
